* {
    margin    : 0;
    padding   : 0;
    box-sizing: border-box;
}

#nav {
    position: relative;
}

#nav ul {
    padding-left    : 20px;
    display         : flex;
    list-style-type : none;
    background-color: #2196f3;
    color           : #fff;
}

#nav li,
#back {
    position   : relative;
    height     : 60px;
    width      : 80px;
    line-height: 60px;
    text-align : center;
    cursor     : pointer;
}

#nav li a,
#back a {
    display: inline-block;
    width  : 100%;
    height : 100%;
}

#nav li:hover::after,
#back:hover::after {
    transform: scaleX(1);
}

#nav li::after,
#back::after {
    content      : "";
    position     : absolute;
    top          : 0;
    left         : 50%;
    margin-left  : -30px;
    display      : block;
    width        : 60px;
    border-bottom: 4px solid #fff;
    transform    : scaleX(0);
    transition   : all .3s;
}

#nav li a,
#back a {
    color          : #fff;
    text-decoration: none;
}

#nav li a:visited,
#nav li a:active,
#nav li a:focus {
    color: #fff;
}

#back {
    position: absolute;
    top     : 0;
    right   : 20px;
}

button {
    padding         : 6px 12px;
    margin          : 5px 0;
    display         : inline-block;
    font-size       : 14px;
    font-weight     : 400;
    line-height     : 1.42857143;
    text-align      : center;
    white-space     : nowrap;
    vertical-align  : middle;
    color           : #fff;
    user-select     : none;
    background-image: none;
    cursor          : pointer;
    border          : 1px solid #0000;
    border-radius   : 4px;
}

input[type="text"],
input[type="number"] {
    display         : block;
    height          : 34px;
    min-width       : 250px;
    padding         : 6px 12px;
    margin          : 10px 0;
    font-size       : 14px;
    line-height     : 1.42857143;
    color           : #555;
    background-color: #fff;
    background-image: none;
    border          : 1px solid #ccc;
    border-radius   : 4px;
    box-shadow      : inset 0 1px 1px rgba(0, 0, 0, .075);
    transition      : border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

input[type="number"]:focus,
input[type="text"]:focus,
textarea:focus {
    border-color: #66afe9;
    outline     : 0;
    box-shadow  : inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

h2 {
    padding    : 10px 0;
    font-size  : 30px;
    font-weight: 500;
    color      : #333;
}

.container {
    padding: 30px 2% 100px;
}

hr {
    margin: 5px 0 30px;
}

textarea {
    margin       : 10px 0;
    padding      : 8px 12px;
    display      : block;
    width        : 350px;
    font-size    : 14px;
    line-height  : 1.42857143;
    border-radius: 4px;
    color        : #333;
    box-shadow   : inset 0 1px 1px rgba(0, 0, 0, .075);
    transition   : border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.space li {
    height: 20px;
}

.case {
    margin-right: 10px;
}

.answer {
    margin-left: 15px;
}

pre {
    padding         : 27px 0 10px;
    font-size       : 16px;
    font-weight     : 500;
    background-color: #2e5270;
    color           : #fff;
    border-radius   : 10px;
}

p {
    padding: 10px 0;
}

#sortresult {
    padding-left: 60px;
}

select {
    padding         : 5px 15px;
    margin-right    : 20px;
    display         : inline-block;
    font-size       : 16px;
    background-color: #fff;
    background-image: none;
    border          : 1px solid #ccc;
    border-radius   : 4px;
    box-shadow      : inset 0 1px 1px rgba(0, 0, 0, .075);
    transition      : border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

select:focus {
    border-color      : #66afe9;
    outline           : 0;
    box-shadow        : inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

#result-wrapper {
    margin-top: 20px;
}

.date {
    margin-bottom: 50px;
}